<template>
	<!-- 	<view class="container">
		<view class="login">
			<image class="logo" src="/static/logo.png"></image> -->
	<view class="title">登录</view>
	<view class="info">Sign in and get your health personalized with our AI Technology.</view>
	<view class="input" :class="{ focus: isFocus }">
		<text class="input-title">用户名</text>
		<view class="input-card">
			<image src="/static/login/email.png" />
			<input class="uni-input" v-model="account" :focus="isFocus" placeholder="请输入用户名"
				placeholder-style="color: #ffffff" @focus="handleFocus" @blur="handleBlur" />
		</view>
	</view>

	<view class="input" :class="{ focus: isPasswordFocus }">
		<text class="input-title">密码</text>
		<view class="input-card">
			<image src="/static/login/lock.png" />
			<input v-model="password" class="uni-input password" :focus="isPasswordFocus" :cursor="cursorPosition"
				:password="showPassword" type="text" placeholder="请输入密码" placeholder-style="color: #ffffff"
				@focus="handlePasswordFocus" @blur="handlePasswordBlur" />
			<image :class="{ eye: !showPassword }" src="/static/login/eye.png" @click="changePasswordShow" />
		</view>
	</view>

	<view class="input">
		<button @click="login">
			<text>登录</text>
			<image src="/static/login/user-black.png" />
		</button>
	</view>

	<view class="footer">
		<text class="footer-text">没有账号？</text>
		<text class="footer-text signUp" @click="goSignUp">注册</text>
	</view>
	<!-- </view> -->
	<!-- </view> -->
</template>

<script setup>
	// 导入登录相关的自定义hook
	import {
		toast
	} from '@/utils/index.js';
	import useInputHook from '../login.js';
	// 导入用户状态管理store
	import useUserStore from '@/store/user.js';
	// 定义可发射的事件
	const emits = defineEmits(['changeVisible']);
	// 使用pinia库中的storeToRefs函数，将用户store中的状态引用到当前组件
	import {
		storeToRefs
	} from 'pinia';

	const userStore = useUserStore()
	// 获取当前用户状态的引用
	const {
		current
	} = storeToRefs(userStore);

	// 使用自定义hook管理登录表单的输入状态
	const {
		inputValue: account,
		isFocus,
		handleFocus,
		handleBlur
	} = useInputHook();

	// 使用自定义hook管理密码表单的输入状态
	const {
		showPassword,
		inputValue: password,
		isFocus: isPasswordFocus,
		cursorPosition,
		handleFocus: handlePasswordFocus,
		changePasswordShow,
		handleBlur: handlePasswordBlur,
	} = useInputHook();

	/**
	 * 执行登录操作
	 * 设置当前用户状态并导航到首页
	 */
	const login = () => {

		if (!account.value) {
			return toast("请输入用户名", 'error')
		}

		if (!password.value) {
			return toast("请输入密码", 'error')
		}


		if (!(/^[A-Za-z0-9]{2,20}$/.test(account.value))) {
			return toast('用户名格式错误', 'error')
		}

		if (!(/^[A-Za-z0-9]{5,20}$/.test(password.value))) {
			return toast('密码格式错误', 'error')
		}

		userStore.userLogin(account.value, password.value)
	};

	/**
	 * 跳转到注册页面
	 * 隐藏登录表单
	 */
	const goSignUp = () => {
		emits('changeVisible', false); // 触发changeVisible事件，隐藏登录表单
	};
</script>
<style lang="scss" scoped>
	@import '../login.scss';
</style>